<mat-list-item
  [@item]="widerPriority"
  class="container"
  [ngClass]="{
    'priority-normal': item.priority === 3,
    'priority-important': item.priority === 2,
    'priority-emergency': item.priority === 1
  }"
  (click)="onItemClick()"


  appDraggable="true"
  draggedClass="drag-start"
  [dragTag]="'task-item'"
  [dragData]="item"

  >
  <mat-checkbox class="status" [checked]="item.completed" (click)="onCheckBoxClick($event)"></mat-checkbox>
  <div mat-line class="content" [ngClass]="{'completed': item.completed}">
    <span [matTooltip]="item.desc">{{item.desc}}</span>
  </div>
  <div mat-line class="bottom-bar" *ngIf="item.dueDate">
    <span class="due-date">{{item.dueDate | date: "yy-MM-dd"}}</span>
    <mat-icon *ngIf="item.reminder" class="alarm">alarm</mat-icon>
  </div>
  <mat-icon class="avatar" mat-list-avatar [svgIcon]="avatar"></mat-icon>
</mat-list-item>
